import { Form, Space, Tag, DatePicker, Radio, InputNumber, Select } from "@bytedance/mona-ui";
import React, { useEffect, useState } from "react";
import { selectAcTimeList } from './ltalpFunc'
import moment from 'moment';

const { RangePicker } = DatePicker;
const { Option } = Select;
let old
function CopyActBoxCoentent(props: any) {
    const { copyData } = props;
    if (!copyData) return null;
    // console.log('copyData', copyData)
    function disabledDate(current) {
        return current && current < moment().subtract(1, 'days') || current > moment().add(7, 'days');
    }
    function disabledDateQter(current) {
        return current && current < moment().subtract(1, 'days') || current > moment().add(365, 'days');
    }
    function setCoyDataInfo() {
        const { begin_time, end_time } = copyData
        const endater = moment.duration(moment(end_time).unix() - moment(begin_time).unix(), 'seconds')
        const d = endater.days()
        const h = endater.hours()
        const m = endater.minutes()
        const s = endater.seconds()
        // console.log('d', d, 'h', h, 'm', m, 's', s)
        let selectGetTimeData = (new Date(end_time).getTime() - new Date(begin_time).getTime()) / 60 / 1000
        // console.log('selectGetTimeDataT', copyData)
        copyData.time_set_type = copyData.time_set_type * 1

        const updatas = {
            ...copyData,
            activtiTime: copyData.begin_time,
            selectTitlDater: (() => {
                if (h > 0) {
                    return 0
                }
                return 1
            })(),
            endTimeTmetr: m * 1 || 59,
            endTimeSmit: (d * 24 + h * 1) || 48,
            activetiQuantity: [begin_time, end_time],
            activetTimeBuy: [begin_time, end_time],
            selectGetTimeData
        }
        return updatas
    }
    const [addLtaLpConfig, setAddLtaLpConfig] = useState<any>({})
    useEffect(() => {
        if (copyData !== old) {
            old = copyData
            setAddLtaLpConfig(setCoyDataInfo())
        }
    }, [copyData])
    // console.log('addLtaLpConfig', addLtaLpConfig)
    const {
        title,
        business_code,
        activtiTime,
        selectTitlDater,
        endTimeTmetr,
        endTimeSmit,
        activetiQuantity,
        time_set_type,
        activetTimeBuy,
        selectGetTimeData
    } = addLtaLpConfig
    return (<Space direction="vertical">
        <Space direction="vertical" size={2}>
            <div className="tit">
                {title}
            </div>
            <Tag bordered color={
                (business_code === 'LimitTime' || business_code === '') ? '#6C26FD' : business_code === 'LimitQuantity' ? '#2B71FF' : '#252931'
            } transparentBg>{(business_code === 'LimitTime' || business_code === '') ? '限时抢购' : business_code === 'LimitQuantity' ? '限量抢购' : business_code === 'OrdinaryTimeBuy' ? '普通降价促销' : ''}</Tag>
        </Space>
        <Form>
            {(business_code === 'LimitTime' || business_code === '') && (<>
                <Form.Item
                    label="活动开始时间"
                >
                    <DatePicker
                        format="YYYY-MM-DD HH:mm:ss"
                        disabledDate={disabledDate}
                        value={moment(activtiTime)}
                        allowClear={false}
                        // disabledTime={disabledDateTime}
                        showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
                        onChange={(e) => {
                            setAddLtaLpConfig({ ...addLtaLpConfig, activtiTime: e })
                        }}
                    />
                </Form.Item>
                <Form.Item
                    label="持续时间"
                    extra={`仅支持输入正整数，最长持续时长为${selectTitlDater ? '59分钟' : '96小时'}`}
                >
                    <Space direction="vertical">
                        <Radio.Group size="small" value={selectTitlDater} onChange={(e) => {

                            setAddLtaLpConfig({ ...addLtaLpConfig, selectTitlDater: e.target.value })

                        }}>
                            <Radio value={0}>按小时持续</Radio>
                            <Radio value={1}>按分钟持续</Radio>

                        </Radio.Group>
                        <InputNumber min={1} max={selectTitlDater ? 59 : 96} unit={selectTitlDater ? '分' : '时'} value={selectTitlDater ? endTimeTmetr : endTimeSmit} onChange={(e) => {

                            selectTitlDater ? setAddLtaLpConfig({ ...addLtaLpConfig, endTimeTmetr: e }) : setAddLtaLpConfig({ ...addLtaLpConfig, endTimeSmit: e })
                        }}></InputNumber>
                    </Space>
                </Form.Item>
            </>)}
            {business_code === 'LimitQuantity' && <Form.Item
                label="活动时间"
            >
                <RangePicker
                    disabledDate={disabledDate}
                    // disabledTime={disabledRangeTime}
                    ranges={{
                        '1天内': [moment(), moment().add(1, 'days')],
                        '今晚0点一天内': [moment().add(1, 'day').startOf('day'), moment().add(2, 'day').startOf('day').subtract(1, 'second')],
                        '3天内': [moment(), moment().add(3, 'days')],
                        '今晚0点三天内': [moment().add(1, 'day').startOf('day'), moment().add(4, 'day').startOf('day').subtract(1, 'second')],
                        '一周内': [moment(), moment().add(7, 'days')],
                        '今晚0点一周内': [moment().add(1, 'day').startOf('day'), moment().add(8, 'day').startOf('day').subtract(1, 'second')],
                    }}
                    showTime={{
                        hideDisabledOptions: true,
                        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                    }}
                    allowClear={false}
                    format="YYYY-MM-DD HH:mm:ss"
                    value={[moment(activetiQuantity[0]), moment(activetiQuantity[1])]}
                    onChange={(e) => {
                        setAddLtaLpConfig({ ...addLtaLpConfig, activetiQuantity: e })
                    }}
                />
            </Form.Item>}

            {(business_code === 'OrdinaryTimeBuy' || business_code === '0') && <Form.Item
                label="活动时间"
            // help={}
            // extra={`仅支持输入正整数，最长持续时长为${selectTitlDater ? '59分钟' : '48小时'}`}
            >
                <Space direction="vertical">
                    <Radio.Group size="small" value={time_set_type} onChange={(e) => {
                        // setSelectAcTime(e.target.value)
                        setAddLtaLpConfig({ ...addLtaLpConfig, time_set_type: e.target.value })

                    }}>
                        <Radio value={0}>按开始结束时间设置</Radio>
                        <Radio value={1}>按时间段选择</Radio>

                    </Radio.Group>
                    {time_set_type ? <Space>
                        <span style={{
                            color: '#55585c',
                            fontSize: 14
                        }}>活动持续</span>
                        <Select style={{ width: 220 }} value={selectGetTimeData} onChange={(e: any) => {
                            // setSelectGetTimeData(e)
                            setAddLtaLpConfig({ ...addLtaLpConfig, selectGetTimeData: e })

                        }} >
                            {selectAcTimeList.map(item => {
                                return <Option value={item.value} key={item.value}>{item.title}</Option>
                            })}
                        </Select>
                        <span style={{
                            color: '#aaabaf',
                            fontSize: 12
                        }}>后结束（创建成功后，活动立即生效）</span>

                    </Space> : <RangePicker
                        disabledDate={disabledDateQter}
                        // disabledTime={disabledRangeTime}
                        ranges={{
                            '1天内': [moment(), moment().add(1, 'days')],
                            '今晚0点一天内': [moment().add(1, 'day').startOf('day'), moment().add(2, 'day').startOf('day').subtract(1, 'second')],
                            '3天内': [moment(), moment().add(3, 'days')],
                            '今晚0点三天内': [moment().add(1, 'day').startOf('day'), moment().add(4, 'day').startOf('day').subtract(1, 'second')],
                            '一周内': [moment(), moment().add(7, 'days')],
                            '今晚0点一周内': [moment().add(1, 'day').startOf('day'), moment().add(8, 'day').startOf('day').subtract(1, 'second')],
                        }}
                        value={[moment(activetTimeBuy[0]), moment(activetTimeBuy[1])]}
                        allowClear={false}
                        showTime={{
                            hideDisabledOptions: true,
                            defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
                        }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={(e) => {
                            if (e) {
                                const endater = moment.duration(e[1].unix() - e[0].unix(), 'seconds')
                                // console.log('endater')
                                const d = endater.days()
                                const h = endater.hours()
                                const m = endater.minutes()
                                const s = endater.seconds()
                                // console.log(d, h, m, s)

                                if (d > 365) {
                                    // console.log('活动时间太长')
                                }
                                if (d == 365 && (h > 0 || m > 0 || s > 0)) {
                                    // console.log('活动时间太长')
                                }
                            }
                            setAddLtaLpConfig({ ...addLtaLpConfig, activetTimeBuy: e })
                        }}
                    />}

                </Space>
            </Form.Item>}
        </Form>
    </Space>)
}

export default CopyActBoxCoentent;